<template>
  <transition name="fade">
    <div class="tanchuang flex-box" v-show="showType">
      <transition name="scale">
        <div class="tanchuang-main" @click="divClick($event)">
          <div class="tanchuang-box flex-box">
           <img :src="img" alt="">
          </div>
          <div @click="clotheTanchuang" class="clothe">✕</div>
        </div>
      </transition>
    </div>
  </transition>
</template>
<script>
// @ is an alias to /src

export default {
  data() {
    return {
      list: ""
    };
  },
  name: "needs",
  props: ["showType", "img"],
  computed: {},
  methods: {
    clotheTanchuang() {
      this.$emit("tcClothe", this.showType);
    },
    divClick(e) {
      e.stopPropagation();
    }
  },
  mounted() {
    let self = this;
    document.onclick = function() {
      self.clotheTanchuang();
    };
  }
};
</script>
<style lang="scss" scoped>
.tanchuang {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  z-index: 6666;
  background: rgba($color: #000000, $alpha: 0.7);
  .tanchuang-main {
    width: r(280);
    height: r(360);
    background: #fff;
    border-radius: r(12);
    position: relative;
    .tanchuang-box {
      width: 100%;
      height: 100%;
      overflow: hidden;
      img {
        max-width: 100%;
      }
    }
    &::before {
      width: 1px;
      height: r(20);
      background: #fff;
      position: absolute;
      bottom: r(-20);
      left: r(140);
      content: "";
    }
    .clothe {
      width: r(32);
      height: r(32);
      position: absolute;
      border-radius: 32px;
      border: 1px solid rgba($color: #fff, $alpha: 0.7);
      bottom: r(-53);
      left: r(124);
      color: #fff;
      font-size: r(16);
      line-height: r(32);
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: 0.25s ease;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
  transform: scale(1.1, 1.1);
}
</style>
